<template>
	<view class="content">
		<view class="">
			<view class="avatarWrap dsp_f flex_jc_c">
				<view class="avaTit flex_r flex_ai_c flex_jc_sb">
					<text>头像</text>
					<u-avatar class="avatar" src="@/static/img/wallhaven-1jppr9.jpg" mode="circle"></u-avatar>
				</view>
			</view>
			<uni-forms :value="myData" ref="form">
				<uni-forms-item required label="姓名" name="name" class="forms-item marRL15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<input :class="{'padRight15':myData.name}" type="text" v-model="myData.name" placeholder="请输入姓名" @input="binddata('name',$event.detail.value)" />
						<view class="iconfont input-reset-icon"v-show="myData.name" @click="clearInput('name')">
							&#xe62f;
						</view>
						<view style="width: 30rpx; height: 30rpx;" v-show="!myData.name"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="sex" label="性别" class="forms-item marRL15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<picker class="padRL15" @change="sexChange" :value="myData.sex" :range="sexData">
							<view class="uni-input">{{sexData[myData.sex]}}</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="电话" name="phone" class="forms-item marRL15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<input :class="{'padRight15':myData.phone}" type="number" v-model="myData.phone" placeholder="请输入电话" @input="binddata('phone',$event.detail.value)" />
						<view class="iconfont input-reset-icon" v-show="myData.phone" @click="clearInput('phone')">
							&#xe62f;
						</view>
						<view style="width: 30rpx; height: 30rpx;" v-show="!myData.phone"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="position" label="职位" class="forms-item marRL15 ">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<picker class="padRL15" @change="posiChange" :value="myData.position" :range="posiData">
							<view class="uni-input">{{posiData[myData.position]}}</view>
						</picker>
					</view>
				</uni-forms-item>
				
				<uni-forms-item name="entryTime" label="入职时间" class="forms-item marRL15" style="margin-bottom: 0; border: none;">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<picker mode = date class="padRL15" @change="entryTime" :value="myData.entryDate" >
							<view class="uni-input">{{myData.entryDate}}</view>
						</picker>
					</view>
				</uni-forms-item>
				
				<view style="width: 100%;height: 20rpx; background-color: #f5f5f5;"></view>
				
				<uni-forms-item name="birthDate" label="出生日期" class="forms-item marRL15 padTop15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<picker mode = date class="padRL15" @change="birthTime" :value="myData.birthDate" >
							<view class="uni-input">{{myData.birthDate}}</view>
						</picker>
					</view>
				</uni-forms-item>
				
				<uni-forms-item name="address" label="现居地址" class="forms-item marRL15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<u-input v-model="myData.address" type="textarea" :auto-height="true" placeholder="" style="text-align: right;"/>
					</view>
				</uni-forms-item>
				
				<!-- :class="{'padRight15':myData.education}" -->
				<uni-forms-item name="education" label="学历" class="forms-item marRL15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<picker class="padRL15" @change="education" :value="myData.education" :range="educationArr">
							<view class="uni-input">{{educationArr[myData.education]}}</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="毕业院校" name="school" class="forms-item marRL15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<input :class="{'padRight15':myData.school}" type="text" v-model="myData.school" placeholder="请输入毕业院校" />
						<view class="iconfont input-reset-icon"v-show="myData.school" @click="clearInput('school')">
							&#xe62f;
						</view>
						<view style="width: 30rpx; height: 30rpx;" v-show="!myData.school"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="紧急联系人" name="urgent" class="forms-item marRL15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<input :class="{'padRight15':myData.urgent}" type="text" v-model="myData.urgent" placeholder="请输入毕业院校" />
						<view class="iconfont input-reset-icon"v-show="myData.urgent" @click="clearInput('urgent')">
							&#xe62f;
						</view>
						<view style="width: 30rpx; height: 30rpx;" v-show="!myData.urgent"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="身份证" name="id" class="forms-item marRL15">
					<view class="my-data-item dsp_f flex_ai_c flex_jc_e">
						<input :class="{'padRight15':myData.id}" type="text" v-model="myData.id" placeholder="请输入身份证" @input="binddata('id',$event.detail.value)" />
						<view class="iconfont input-reset-icon"v-show="myData.id" @click="clearInput('id')">
							&#xe62f;
						</view>
						<view style="width: 30rpx; height: 30rpx;" v-show="!myData.id"></view>
					</view>
				</uni-forms-item>
				<button class="subBtn" @click="submitMyData">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import { rules } from '@/utils/verificationForm'
	// import { regionArr } from '@/utils/dictionaries'
	export default {
		data() {
			return {
				// 性别
				sexData: ['女', '男'],
				//职位
				posiData: ['技术', '商务', '综合', 'iT农民'],
				//学历
				educationArr:['小学','初中','高中','中专','大专','本科','硕士','博士'],
				// 个人信息
				myData: {
					name: '',
					sex: 0,
					phone: '',
					position: 0,
					entryDate:'选择时间',
					birthDate:'选择时间',
					address:'',
					education:0,
					school:'',
					urgent:'',
					id:'',
				},
				//验证
				rules: rules,
				//地区
				// regionArr:regionArr,
			};
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			// 性别
			sexChange(e) {
				this.myData.sex = e.target.value
			},
			//职位
			posiChange(e) {
				this.myData.position = e.target.value
			},
			// 入职时间
			entryTime(e){
				this.myData.entryDate = e.target.value
			},
			// 出生日期
			birthTime(e){
				this.myData.birthDate = e.target.value
			},
			//
			education(e){
				this.myData.education = e.target.value
			},
			// 提交
			submitMyData() {
				this.$refs.form.submit().then(res => {
					this.myData.name = res.name
					this.myData.sex = res.sex
					this.myData.phone = res.phone
					this.myData.position = res.position
					console.log('表单数据信息：', res, this.myData);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 清空文本框
			clearInput(clearContent){
				if(clearContent.indexOf('name')>=0){
					this.myData.name = ''
				}
				if(clearContent.indexOf('phone')>=0){
					this.myData.phone = ''
				}
				if(clearContent.indexOf('school')>=0){
					this.myData.school = ''
				}
				if(clearContent.indexOf('urgent')>=0){
					this.myData.urgent = ''
				}
				if(clearContent.indexOf('id')>=0){
					this.myData.id = ''
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.avatarWrap{
			width: 100%;
			height: 120rpx;
			.avaTit{
				width: calc(100% - 60rpx);
				height: 120rpx;
				.avatar{
					
				}
			}
			
		}
		.forms-item {
			border-bottom: 1px solid #e5e5e5;
		}
		.my-data-item {
			width: 100%;
			height: 100%;
			position: relative;

			>input,picker {
				width: 100%;
				text-align: right;
			}

			.input-reset-icon {
				font-size: 28rpx;
				color: #e5e5e5;
			}
		}
		.subBtn{
			
		}
	}
</style>
<style lang="scss">
	.content{
		.uni-forms--top{
			padding: 20rpx 0;
		}
	}
</style>